<script lang="ts" setup>
// import type { InputMode } from '@tg/types'
import { ErrorMessage, useField } from 'vee-validate'
import { computed, ref } from 'vue'
import BaseIcon from './BaseIcon.vue'
const { t, locale } = useI18n();
interface Props {
  name: string
  type?: HTMLInputElement['type'] | 'select'
  inputmode?: any // InputMode
  modelValue?: string | number
  placeholder?: string
  required?: boolean
  search?: boolean
  tipMsg?: string
  label?: string
  disabled?: boolean
  readonly?: boolean
  clearable?: boolean
  showCopy?: boolean
}

defineOptions({
  name: 'BaseInput',
})

const props = withDefaults(defineProps<Props>(), {
  type: 'text',
  inputmode: 'text',
  disabled: false,
})

const emits = defineEmits(['update:modelValue', 'change','blur', 'clear', 'close', 'search', 'focus'])

const {
  value: inputValue,
  handleBlur,
  handleChange,
} = useField(props.name, undefined, {
  initialValue: props.modelValue,
})

const type = ref(props.type)
const isShowTip = ref(false)
const inputRef = useTemplateRef<HTMLInputElement | null>('inputRef')

const inputMode = computed<any>(() => {
  if (props.type === 'number') {
    return 'numeric'
  }

  return props.inputmode
})

function passwordToggle() {
  type.value = type.value === 'password' ? 'text' : 'password'
}
function onFocus() {
  emits('focus')
  if (!inputValue.value && props.tipMsg) {
    isShowTip.value = true
  }
  inputRef?.value?.focus?.()
  emits('focus')
}
function onInput(e: Event) {
  handleChange(e)
  emits('update:modelValue', (e.target as HTMLInputElement)?.value)
  emits('change', e)
}

function onClear() {
  emits('update:modelValue', '')
  emits('clear')
  if (!props.modelValue)
    emits('close')
}

function onSearch() {
  emits('search')
}
watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue !== undefined) {
      inputValue.value = newValue;
    }
  }
);
watch(inputValue, (v) => {
  if (v && props.tipMsg) {
    isShowTip.value = false
  }
  if (v === '' && props.tipMsg) {
    isShowTip.value = true
  }
})
defineExpose({
  onFocus
})
</script>

<template>
  <BaseTooltip :text="tipMsg" :show="!!tipMsg && isShowTip" class="min-w-0">
    <div v-if="props.label" class="mb-[.375rem] text-text-white-2 font-[700] flex justify-between items-center">
      <div>
        <span>{{ props.label }}</span>
        <span v-if="props.required" class="text-function-red ml-[.3125rem]">*</span>
      </div>
      <slot name="label-right" />
    </div>
    <div class="base-input " @click="onFocus">
      <slot name="left-icon" />
      <BaseIcon v-if="search" name="search" class="text-[1.5rem]" />
      <input class="min-w-0 disabled:text-text-white-2" :readonly="props.readonly || props.type === 'select'" ref="inputRef" :name="name" :inputmode="inputMode" :type="type" :placeholder="props.placeholder"
      :disabled="disabled" :value="inputValue" :required="props.required" @input="onInput" @blur="handleBlur;emits('blur'), isShowTip = false"  @keypress.enter="onSearch" @focus="onFocus">
      <div class="shrink-0">
        <slot name="right-icon" />
      </div>
      <div v-if="props.type === 'select'"
        class="shrink-0 size-[20px] bg-bg-black-4 rounded-[4px] flex justify-center items-center">
        <BaseIcon name="uni-arrow-down" className="!text-text-white-0" />
      </div>
      <div v-if="props.type === 'password'" class="password text-[1.5rem] center shrink-0" @click="passwordToggle">
        <BaseIcon :name="type === 'password' ? 'eye-on' : 'eye-off'" class="text-base" />
      </div>
      <div v-if="clearable" class="clear-icon" @click.stop="onClear">
        <BaseIcon name="uni-close" />
      </div>
      <div v-if="showCopy" class="size-[1.375rem] bg-bg-black-5 rounded-[.4375rem] center pl-[.25rem]">
        <BaseIcon name="uni-copy" class="text-text-black-10 mr-[.25rem]" @click="application.copy(inputValue.toString(), t)"/>
      </div>
    </div>
    <ErrorMessage :name="name" class="text-function-red mt-[0.125rem] inline-block" />
  </BaseTooltip>

</template>

<style>
:root {
  --bc-input-focus-border-color: #24EE89;
  --bc-input-border-color: #3B4041;
  --bc-input-pd-left: 0.75rem;
  --bc-input-pd-right: 0.5rem;
  --bc-input-bg: var(--color-bg-black-1);
}
</style>

<style scoped lang="scss">
.base-input {
  height: 2.5rem;
  display: flex;
  align-items: center;
  border-radius: 0.25rem;
  border: 1px solid var(--bc-input-border-color);
  padding-left: var(--bc-input-pd-left);
  padding-right: var(--bc-input-pd-right);
  gap: 0.5rem;
  transition: all 0.35s cubic-bezier(0.36, 0.66, 0.04, 1);
  color: #fff;
  background-color: var(--bc-input-bg);

  &:focus-within {
    border-color: var(--bc-input-focus-border-color);
  }

  >input {
    font-size: .75rem;
    flex: 1;

    &::placeholder {
      color: #B3BEC1;
      font-size: 0.75rem;
    }
  }
}
</style>
